<template>
  <h1>组件传值</h1>
  <child ref="childRef" :msg="msg" :userInfo="userInfo" @change="changeCount">
    <template #ref>
      <a-button @click="changeChildStr">父组件获取子组件事件</a-button>
    </template>

  </child>
  <childSon></childSon>

  <div></div>
</template>

<script setup>
import child from './2child.vue'
import childSon from './2childSon.vue'
import {ref, reactive, provide} from 'vue'
import useUserStore from '../store/modules/user.js'
const msg = ref('this is msg')
const userInfo = reactive({
  name: '张三',
  sex: '男',
  count: 0
})
const changeCount = () => {
  userInfo.count++
}


let childRef = ref()
const changeChildStr = () => {
  console.log(childRef.value.str)
  childRef.value.addStr()
}


const provideMsg = ref('父组件provide的数据: provideMsg')
provide('parentProvideMsg', provideMsg)



const userStore = useUserStore()
console.log('parent: ' + JSON.stringify(userStore.userInfo));
userStore.log()
</script>

<style scoped>

</style>